* {
  margin: 0;
  padding: 0;
}


/* 大背景 */
/* 默认状态下html和body高度为0，所以导致cover缩放背景图导致不成功 */
html{
  height: 100%;
}

body{
  height: 100%;
  background-image: url(../images/f1_1.jpg);
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}


.cloud img{
  position: absolute;
  left: 50%;
}

.cloud img:nth-child(1){
  margin-left: -250px;
  top: 20px;
  animation: cloud 1s infinite alternate linear;
}

.cloud img:nth-child(2){
  margin-left: 400px;
  top: 100px;
  animation: cloud 1s infinite alternate linear 0.4s;
}

.cloud img:nth-child(3){
  margin-left: -550px;
  top: 200px;
  animation: cloud 1s infinite alternate linear 0.6s;
}

@keyframes cloud{
  100%{
    transform: translate(20px);
  }
}

/* 文字 */
.text img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: text .5s;
}

@keyframes text{
  0%{
    /* 注意层叠性 */
    transform: translate(-50%,-50%) scale(1);
  }
  20%{
    transform: translate(-50%,-50%) scale(0.1);
  }
  40%{
    transform: translate(-50%,-50%) scale(1.5);
  }
  70%{
    transform: translate(-50%,-50%) scale(0.8);
  }
  100%{
    transform: translate(-50%,-50%) scale(1);
  }
}
